<template>
  <view v-if="$accessCheck($Access.queryGetInventoryAll)">
    <view class="keyword-view clearfix">
      <!-- <u-search @clear="searchList" @search="searchList" @custom="searchList" :clearabled="true" placeholder="商品名称" v-model="keyword"></u-search> -->
      <view class="float_left">
        <u-search
          :show-action="false"
          @clear="searchList"
          @search="searchList"
          :clearabled="true"
          placeholder="商品名称"
          v-model="keyword"
        ></u-search>
      </view>
      <view class="float_right" @click="openSel('search_show')"
        ><text class="custom-icon custom-icon-shaixuan"></text
      ></view>
    </view>
    <view class="main-view clearfix">
      <view class="left-view float_left">
        <scroll-view scroll-y="true" class="left-scroll">
          <view
            class="cate-li"
            :class="[!category_id ? 'cate-on' : '']"
            @click="changeCate(0)"
            >全部</view
          >
          <view
            class="cate-li ellipsis"
            v-for="(item, index) in category_list"
            :key="index"
            @click="changeCate(item.id)"
            :class="[category_id === item.id ? 'cate-on' : '']"
          >
            {{ item.title }}
          </view>
        </scroll-view>
      </view>
      <view class="rigth-view float_left">
        <scroll-view
          scroll-y="true"
          class="rigth-scroll"
          @scrolltolower="moreGoods"
          :scroll-top="scrollTop"
        >
          <view
            class="goods-li"
            v-for="(item, index) in goods_list"
            :key="index"
          >
            <view class="goods-main clearfix">
              <image
                class="goods-img float_left"
                :src="item.images[0]"
                mode="aspectFill"
              ></image>
              <view class="goods-info float_left">
                <view class="goods-name ellipsis">{{ item.materielName }}</view>
                <view class="goods-code">{{ item.materielCode }}</view>
                <view class="goods-code"
                  >{{ item.unitName }};{{ item.skuName }}</view
                >
                <view class="goods-code">{{ item.skuValue }}</view>
                <!-- <view class="goods-tag">
									<u-tag class="tag-li" mode="plain" size="mini" :text="item.categoryName" />
									<u-tag class="tag-li" mode="dark" size="mini" text="库存分步" />
								</view> -->
              </view>
            </view>
            <view class="num-ul">
              <view class="num-li">
                <view class="label">可售</view>
                {{ $utils.formatNub(item.inventoryNum) }}{{ item.unitName }}
              </view>
              <view class="num-li">
                <view class="label">占用</view>
                {{ $utils.formatNub(item.lockInventory) }}{{ item.unitName }}
              </view>
              <view class="num-li">
                <view class="label">换算</view>
                {{ item.skuNum }}
              </view>
            </view>
          </view>
          <u-loadmore v-if="goods_list.length" :status="load_status" />
          <view v-if="!goods_list.length" class="empty-view"
            ><u-empty text="暂无商品" mode="favor"></u-empty
          ></view>
        </scroll-view>
      </view>
    </view>
    <u-popup v-model="search_show" mode="right">
      <view class="search-pop">
        <view class="form-view">
          <u-form label-width="160rpx" label-position="left">
            <u-form-item label="库存状态">
              <view class="clearfix form-val" @click="openFrom">
                <text class="float_left ellipsis">{{
                  haveInventoryNum ? haveInventoryNum_name : "请选择"
                }}</text>
                <view class="float_right" @click.stop="clearValue()">
                  <u-icon
                    :name="
                      !haveInventoryNum ? 'arrow-right' : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
          </u-form>
        </view>
        <view class="search-btn">
          <view class="btn-li btn-reset" @click="clearValue()">重置</view>
          <view class="btn-li btn-submit" @click="searchList">确定</view>
        </view>
      </view>
    </u-popup>
    <u-select
      @confirm="fromChange"
      v-model="from_show"
      :list="order_status"
    ></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      load_status: "nomore",
      tab_current: 0,
      status_list: [
        {
          label: "启用",
          value: 5,
        },
        {
          label: "禁用",
          value: 4,
        },
      ],
      category_list: [], // 分类列表
      category_id: "", // 分类id
      auditStatus: 2, // 审核状态
      isOption: "", // 是否是自选商品
      page: 1,
      pageSize: 10,
      total: 0,
      goods_list: [],
      brandId: "", //品牌
      brand_name: "",
      keyword: "", //关键词
      enableStatus: "", //上下架
      scrollTop: -1,
      search_show: false,
      haveInventoryNum: "",
      haveInventoryNum_name: "",
      from_show: false,
      order_status: [
        {
          label: "有库存",
          value: 5,
        },
        {
          label: "无库存",
          value: 4,
        },
      ],
    };
  },
  onLoad() {
    this.getAllCategory();
  },
  onShow() {
    this.page = 1;
    this.getInventoryAll();
  },
  methods: {
    // 重置搜索
    clearValue(params) {
      if (params) {
        this.haveInventoryNum = "";
      } else {
        this.haveInventoryNum = "";
        this.searchList();
      }
    },
    fromChange(e) {
      this.haveInventoryNum = e[0].value;
      this.haveInventoryNum_name = e[0].label;
    },
    openFrom() {
      this.from_show = true;
    },
    openSel(key) {
      this[key] = true;
    },
    //  获取所有商品分类
    getAllCategory() {
      this.$u.api
        .getAllCategory({
          enableStatus: 5,
        })
        .then((res) => {
          this.category_list = res.data;
        });
    },
    // 切换分类
    changeCate(id) {
      this.scrollTop = 0;
      this.$nextTick(function () {
        this.scrollTop = -1;
      });
      this.category_id = id;
      this.searchList();
    },
    // 滚动到底部，触发上拉加载
    moreGoods() {
      if (this.total / this.pageSize > this.page) {
        this.page += 1;
        this.getInventoryAll();
      }
    },
    searchList() {
      this.search_show = false;
      this.page = 1;
      this.getInventoryAll();
    },

    // 获取商品列表
    getInventoryAll() {
      this.load_status = "loading";
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        categoryId: this.category_id,
        materielName: this.keyword,
        warehouseId: "",
        haveInventoryNum: this.haveInventoryNum,
      };
      this.$u.api.getInventoryAll(params).then((res) => {
        if (this.page === 1) {
          this.goods_list = res.data;
        } else {
          this.goods_list = this.goods_list.concat(res.data);
        }
        this.total = res.pageTotal;
        this.load_status = this.$utils.loadStatus(
          this.page,
          this.pageSize,
          this.total
        );
      });
    },
  },
};
</script>

<style scoped lang="scss">
// .keyword-view {
// 	background-color: #ffffff;
// 	padding: 20rpx 24rpx;

// 	.float_left {
// 		width: 640rpx;
// 	}

// 	.float_right {
// 		line-height: 64rpx;
// 		width: 50rpx;
// 		text-align: center;
// 		color: #666666;
// 	}
// }
.keyword-view {
  padding: 20rpx 24rpx 0;
  background-color: #ffffff;
  z-index: 9;
  padding-bottom: 20rpx;

  .float_left {
    width: 640rpx;
  }

  .float_right {
    line-height: 64rpx;
    width: 50rpx;
    text-align: center;
    color: #666666;
  }
}

.main-view {
  .left-view {
    width: 168rpx;
    background-color: #f7f8fa;

    .left-scroll {
      width: 100%;
      height: calc(100vh - 106rpx);

      .cate-li {
        line-height: 90rpx;
        padding-left: 36rpx;
        color: #666666;
        -webkit-line-clamp: 1;
      }

      .cate-on {
        background-color: #ffffff;
        color: #000000;
        position: relative;

        &::before {
          content: "";
          display: block;
          width: 6rpx;
          height: 20rpx;
          background-color: $uni-color-primary;
          position: absolute;
          left: 14rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }

  .rigth-view {
    width: calc(100% - 168rpx);
    background-color: #ffffff;

    .rigth-scroll {
      width: 100%;
      height: calc(100vh - 106rpx);

      .goods-li {
        padding: 20rpx;
        border-bottom: 1px solid #f5f5f5;
        position: relative;

        .goods-main {
          .goods-img {
            border-radius: 10rpx;
            width: 156rpx;
            height: 156rpx;
            margin-right: 20rpx;
          }

          .goods-info {
            width: 366rpx;

            .goods-name {
              -webkit-line-clamp: 1;
            }

            .goods-code {
              font-size: 24rpx;
              padding-top: 6rpx;
            }

            .goods-tag {
              padding: 10rpx 0;

              .tag-li {
                margin-right: 14rpx;
              }
            }

            .goods-num {
              color: #999999;
              font-size: 22rpx;

              text {
                padding-right: 10rpx;
              }
            }
          }
        }

        .num-ul {
          display: flex;
          padding-top: 20rpx;

          .num-li {
            font-size: 24rpx;
            line-height: 36rpx;
            flex: 3;
            text-align: center;
            position: relative;
            font-weight: bold;

            .label {
              font-weight: 400;
              color: #999999;
            }

            &::after {
              display: block;
              content: "";
              position: absolute;
              width: 1px;
              height: 60rpx;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              background-color: #eeeeee;
            }

            &:last-child {
              &::after {
                display: block;
                content: "";
                position: absolute;
                width: 1px;
                height: 50rpx;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
                background-color: transparent;
              }
            }
          }
        }

        .more-btn {
          position: absolute;
          right: 20rpx;
          bottom: -120rpx;
          background-color: #ffffff;
          border-radius: 10rpx;
          padding: 0 20rpx;
          z-index: 9;
          box-shadow: 0px 3px 24rpx rgba(0, 0, 0, 0.1);

          .more-btn-li {
            font-size: 24rpx;
            line-height: 60rpx;
            text-align: center;
            border-bottom: 1px solid #f5f5f5;

            &:last-child {
              border: 0 none;
            }
          }
        }
      }
    }
  }
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
</style>
